<template>
  <div class="collect">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      :fixed="true"
      :placeholder="true"
    >
      <template #right>
        <!-- <van-icon name="search" size="18" /> -->
        <span v-if="$store.state.islogin==1" @click="personal">个人中心</span>
        <span v-else @click="login">登录</span>
      </template>
    </van-nav-bar>
    <div v-if="$store.state.islogin==1">
      <van-tabs v-model="active" >
        <van-tab title="收藏">
          <div class="coll"></div>
          <div v-for="(item, i) of collect" :key="i">
            <menurow :cid="item.collect" />
          </div>
        </van-tab>
        <van-tab title="历史">内容2</van-tab>
      </van-tabs>
    </div>
    <div v-else class="islogin">
     <van-image radius="30" :src="require('../../assets/logo.png')" />
     <br>
      暂未登录,请先登入</div>
    <tabbar></tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      collect: [],
      active: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    personal() {
      this.$router.push("/personal");
    },
    login() {
      this.$router.push("/login");
    },
  },
  mounted() {
    this.axios
      .get(`/users/collect?uid=${this.$store.state.userid}`)
      .then((result) => {
        let results = result.data.result;
        this.collect = results;
        // console.log(results);
      });
  },
};
</script>
<style lang="scss">
.collect {
  .van-nav-bar__text {
    color: black;
    font-weight: 500;
    font-size: 15px;
  }
  .van-icon-arrow-left::before {
    color: black;
  }
  .van-tabs__wrap {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  .coll{
    height: 45px;
  }
.islogin{
  width: 100%;
  height: 45px;
  line-height: 30px;
  text-align: center;
  color: rgb(102, 96, 96);
  margin-top: 50px;
}
}
</style>